<template>
  <div class="container-full border-box">
    <div class="logo">
      <img :src="logo" alt="" />
    </div>
    <div class="intro">您好！</div>
    <div class="intro">欢迎使用 <span class="highlight">XXXXX</span></div>

    <div class="user">
      <van-field v-model="username" placeholder="请输入用户名" />
      <van-field v-model="password" type="password" placeholder="请输入密码" />
    </div>

    <div class="tip">
      <van-checkbox v-model="agreement"
        >阅读并同意
        <a href="http://172.30.3.166/rd-fe/h5-template">《用户服务协议》</a>，<a
          href="http://172.30.3.166/rd-fe/h5-template"
          >《用户隐私协议》</a
        ></van-checkbox
      >
    </div>

    <g-button @click="login" :disabled="!agreement" :loading="loading"
      >登录
    </g-button>

<!--    <g-dialog-->
<!--      v-model="dialog.visible"-->
<!--      :title="dialog.title"-->
<!--      :buttonText="dialog.buttonText"-->
<!--      @confirm="onConfirm"-->
<!--    >-->
<!--      {{ dialog.content }}-->
<!--    </g-dialog>-->
    <div class="login-tip">
      <p>注：此页面为模拟一码通登录页面，测试用户名：zhangfx，密码：123456</p>
    </div>
  </div>
</template>

<script>
import Button from "@/components/common/button/Button";
import Dialog from "@/components/common/dialog/Dialog.vue";
import { thirdLogin } from "../../apis";
import * as types from "../../store/mutation-types";
import logo from "../../assets/img/logo.png";

export default {
  name: "Login",
  components: {
    GDialog: Dialog,
    GButton: Button
  },
  data() {
    return {
      username: "",
      password: "",
      agreement: false,
      loading: false,
      logo,
      dialog: {
        visible: false,
        title: "",
        buttonText: "确定",
        content: ""
      }
    };
  },
  created() {
    if (process.env.NODE_ENV !== "production") {
      this.username = "zhangfx";
      this.password = "123456";
    }
  },
  methods: {
    login() {
      this.$store.commit(types.REMOVE_ALL);
      if (this.username && this.password) {
        this.loading = true;
        thirdLogin({
          username: this.username,
          password: this.password
        })
          .then(async res => {
            // this.$store.commit(types.SET_ACCESS_TOKEN, res);
            // localStorage.setItem("token", res.access_token);
            localStorage.setItem("token", res.access_token);
            localStorage.setItem("expire_in", new Date().getTime());
            this.dialog.visible = true;
            this.dialog.title = "登录成功";
            this.dialog.content = res.access_token;
            this.initData();
          })
          .catch(err => {
            this.log("[登录]", err);
            this.$notify({ type: "danger", message: err.message });
          })
          .finally(() => {
            this.loading = false;
          });
      } else {
        this.$notify({ type: "warning", message: "请输入用户名或密码" });
      }
    },
    initData() {
      this.api.getCard().then(res => {
        if (this.modelFunctions.httpTip(res)) {
          this.$store.dispatch("cards", res.data);
          this.$router.push("/check");
        }
        // this.$store.dispatch("cards", res.data);
      });
    }
    // onConfirm() {
    //   this.dialog.visible = false;
    //   const target = this.$route.query.redirect;
    //   if (target) {
    //     this.$router.push(target);
    //   } else {
    //     this.$router.push("/check");
    //   }
    // }
  }
};
</script>

<style lang="less" scoped>
.container-full {
  padding: 15px 0;

  .logo {
    padding: 0 15px;

    img {
      height: 26px;
      width: 26px;
    }

    margin-bottom: 8px;
  }

  .intro {
    padding: 0 15px;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    color: @text-color;
    margin-bottom: 8px;

    .highlight {
      color: @blue;
    }
  }

  .user {
    margin-bottom: 8px;
  }

  .tip {
    padding: 0 15px;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    color: @text-color;
    margin-bottom: 8px;

    a {
      color: @blue;
    }
  }

  .download {
    padding: 0 15px;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    color: @red;
    margin-bottom: 8px;

    a {
      color: @blue;
    }
  }

  .login-tip {
    margin: 90px 20px 0 20px;

    p {
      font-size: 12px;
      line-height: 24px;
      color: #666;
    }
  }
}
</style>
